 <template><!--职级发展学习地图-->
    <div class="warp-2" style="height: 100%;">
            <navbar :title="$t('find_profession_develop')"></navbar>
            <div>
                <div class="grade-bg-box">
                    <p>{{$t('lab_have_much_map_1')}} <em>{{ gradeList.length }}</em> {{$t('lab_have_much_map_2')}}</p>
                </div>
                <div class="module-box-30">
                    <ul>
                        <li class="white-bg bottom-shadow" v-for="info in gradeList" :key="info.pfsId" style="position: relative" @click="enterDetail(info.pfsId, info.pfsTitle)">
                            <div>
                                <p class="font-size16">{{ info.pfsTitle }}</p>
                                <p class="color999 margin-top15">{{ info.pfsCreateTime | formTime('splitTime') }}</p>
                            </div>
                            <van-icon name="arrow" color="#C7C7CC" size="20"/>
                            <!-- <div class="margin-top15 clearfix">
                                <span class="word-btn-05">{{$t('lab_enter')}} ></span>
                            </div> -->
                        </li>
                    </ul>
                </div>
                <!--暂无数据-->
                <div v-if="!isLoading && gradeList.length === 0" class="gradeMapList-no-data">
                    <div class="box-table" style="width:100%;">
                        <div class="box-table-cell" style="text-align: center;">
                            <div class="no-data">
                                <img src="../../../static/images/no-data.png" alt=""/>
                                <p class="color999">{{ $t("no_data") }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <common-loading :isLoading="isLoading"></common-loading>
            </div>
    </div>
</template>

<script>
import { Icon } from 'vant';
export default {
    name: 'GradeMapList',
    components: { [Icon.name]: Icon },
    data() {
        return {
            gradeList: [],
            isLoading: true
        };
    },
    methods: {
        getGradeList() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/grade-map/mapList'
            }).then(res => {
                if (res.data) {
                    this.gradeList = res.data.reverse();
                }
                this.isLoading = false;
            });
        },
        enterDetail(id, title) {
            let nodeListId = this.wbEncryptor(id);
            window.sessionStorage.setItem('gradeMapTitle', title);
            this.$router.push({path: `nodelist/${id}`});
        }
    },
    mounted() {
        this.getGradeList();
    }
};
</script>

<style scoped lang="less">
    .grade-bg-box {
        width: 100%;
        height: 156px;
        background: url(./images/banner1.png) no-repeat 0 70%;
        background-size: 100%;
        margin-top: 56px;
        p {
            padding: 60px 20px 0 0;
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
            em {
                font-size: 22px;
                color: #ffd824;
            }
        }
    }
    .module-box-30 {
        margin: -17px 15px 0 ;
        ul {
            li {
                margin-bottom: 12px;
                padding: 20px 15px;
                background: #ffffff;
                border-radius: 4px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
    .word-btn-05 {
        float: right;
        color: #1F53CC;
    }
    .gradeMapList-no-data {
        height:60vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /deep/.header-title-01 {
        background: #075ebb!important;
    }
    /deep/.van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/.van-nav-bar__content .van-nav-bar__title {
        color: #ffffff;
    }
</style>
